$(function() {
    const layer = layui.layer
    initCateList()

    // 获取文章分类列表
    function initCateList () {
        // 发送网络请求
        // 方法： get  请求地址： /my/article/cates  参数： 无
        $.get('/my/article/cates').then(res => {
            // 将模板引擎(tpl-tbody) 渲染到 容器(tbody)中
            $('tbody').html(template('tpl-tbody', res))
        })
    }

    // 给删除按钮绑定点击事件  进行删除分类 (使用事件委托去绑定【按钮是动态渲染的】)
    $('tbody').on('click', '.btn-delete', function() {
        // 获取被点击类别ID （按钮的属性中）
        const id = $(this).data('id')
        // 1. 显示询问框
        layer.confirm('你是否要删除?', { icon: 3, title:'提示' }, function(index) {
            // 2. 发送请求删除该类别  /my/article/deletecate/:id   GET
            $.get('/my/article/deletecate/' + id).then(res => {
                // 显示弹窗提示
                layer.msg('删除成功')
                // 重新查询类别
                initCateList()
                // 手动关闭
                layer.close(index)
            })
        })
    })
    // 添加弹窗ID
    let addIndex = null
    // 给添加类别按钮 绑定点击事件 
    $('#add-cate').on('click', function() {
        // 1. 显示页面弹窗
        addIndex = layer.open({
            title: '添加文章类别', // 标题
            type: 1, // 弹窗类型
            area: ['500px', '250px'], // 宽高
            content: $('#tpl-add-cate').html(), // 弹窗内容 html()
        })
    })

    // 监听添加分类 表单提交 (使用事件委托去监听)
    $('body').on('submit', '#add-cate-form', function() {
        // 1. 获取表单的值
        const data = layui.form.val('add-cate-form')
        // 2. 发送请求 
        $.post('/my/article/addcates', data).then(res => {
            if (res.status !== 0) {
                return layer.msg(res.message || '添加失败！')
            }
            layer.msg('添加成功！')
            // 渲染列表
            initCateList()
            // 关闭弹窗
            layer.close(addIndex)
        })
        return false
    })
    
    let editIndex = null
    // 给编辑分类按钮 绑定点击事件 （使用事件委托去绑定）
    $('tbody').on('click', '.edit-btn', function() {
        // 1. 获取当前标签传递过来的属性值
        const id = $(this).data('id')
        // 2. 查询当前类别的详细内容
        $.get('/my/article/cates/' + id).then(res => {
            // 3. 显示弹窗
            editIndex = layer.open({
                type: 1,
                title: '修改文章类别',
                area: ['500px', '250px'],
                content: $('#tpl-edit-cate').html()
            })
            // 4. 将内容渲染到表单中
            layui.form.val('edit-cate-form', res.data)
        })

    })

    // 监听编辑类别的表单提交 
    $('body').on('submit', '#edit-cate-form', function() {
        // 1. 获取表单的数据
        const data = layui.form.val('edit-cate-form')
        // 2. 发送网络请求 修改类别
        $.post('/my/article/updatecate', data).then(res => {
            if (res.status !== 1) {
                return layer.msg(res.message || '修改失败！')
            }
            layer.msg('修改成功！')
            layer.close(editIndex)
            initCateList()
        })
        return false
    })
})